<!--views/SystemSettings.vue - 系统设置页面-->
<template>
  <div class="system-settings" v-loading="loading">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">
        <el-icon><Setting /></el-icon>
        系统设置
      </h1>
      <p class="page-description">配置系统的各项参数和功能</p>
    </div>

    <!-- 设置选项卡 -->
    <el-tabs v-model="activeTab" type="border-card" class="settings-tabs">

      <!-- 航班API设置 -->
      <el-tab-pane label="航班API设置" name="flight">
        <el-card class="setting-card">
          <template #header>
            <div class="card-header">
              <span>航班API设置</span>
              <el-button size="small" @click="refreshApiConfig" :loading="loading">
                <el-icon><Refresh /></el-icon>
                刷新配置
              </el-button>
            </div>
          </template>

          <el-form
              :model="apiSettings"
              :rules="apiRules"
              ref="apiForm"
              label-width="120px"
              class="settings-form">

            <el-row :gutter="24">
              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="启用API">
                  <el-switch
                      v-model="apiSettings.enabled"
                      active-text="启用"
                      inactive-text="禁用">
                  </el-switch>
                </el-form-item>
              </el-col>

              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="请求超时" prop="timeout">
                  <el-input-number
                      v-model="apiSettings.timeout"
                      :min="5000"
                      :max="60000"
                      :step="1000"
                      style="width: 100%">
                  </el-input-number>
                  <span class="unit">毫秒</span>
                </el-form-item>
              </el-col>

              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="重试次数" prop="retryCount">
                  <el-input-number
                      v-model="apiSettings.retryCount"
                      :min="0"
                      :max="5"
                      style="width: 100%">
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="Cookie" prop="cookie">
                  <el-input
                      v-model="apiSettings.cookie"
                      type="textarea"
                      :rows="3"
                      placeholder="从浏览器复制cookie值"
                      show-word-limit>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="Token" prop="token">
                  <el-input
                      v-model="apiSettings.token"
                      placeholder="从浏览器复制token值"
                      show-password>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item>
              <el-button
                  type="primary"
                  @click="saveApiSettings"
                  :loading="savingApi">
                <el-icon><Check /></el-icon>
                保存设置
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>

      <!-- 酒店API设置 -->
      <el-tab-pane label="酒店API设置" name="hotel">
        <el-card class="setting-card">
          <template #header>
            <div class="card-header">
              <span><el-icon><House /></el-icon> 酒店API设置</span>
              <el-button size="small" @click="refreshHotelApiConfig" :loading="loading">
                <el-icon><Refresh /></el-icon>
                刷新配置
              </el-button>
            </div>
          </template>

          <el-form
              :model="hotelApiSettings"
              :rules="apiHotelRules"
              ref="hotelApiForm"
              label-width="120px"
              class="settings-form">

            <!-- 基础设置 -->
            <el-divider content-position="left">
              <el-icon><Tools /></el-icon>
              基础设置
            </el-divider>

            <el-row :gutter="24">
              <el-col :xs="24" :sm="8">
                <el-form-item label="启用API">
                  <el-switch
                      v-model="hotelApiSettings.hotelEnabled"
                      active-text="启用"
                      inactive-text="禁用">
                  </el-switch>
                </el-form-item>
              </el-col>

              <el-col :xs="24" :sm="8">
                <el-form-item label="请求超时" prop="timeout">
                  <el-input-number
                      v-model="hotelApiSettings.timeout"
                      :min="5000"
                      :max="60000"
                      :step="1000"
                      style="width: 100%">
                  </el-input-number>
                  <span class="unit">毫秒</span>
                </el-form-item>
              </el-col>

              <el-col :xs="24" :sm="8">
                <el-form-item label="重试次数" prop="retryCount">
                  <el-input-number
                      v-model="hotelApiSettings.retryCount"
                      :min="0"
                      :max="5"
                      style="width: 100%">
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 认证信息 -->
            <el-divider content-position="left">
              <el-icon><Key /></el-icon>
              认证信息
            </el-divider>

            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="Cookie" prop="cookie">
                  <el-input
                      v-model="hotelApiSettings.cookie"
                      type="textarea"
                      :rows="3"
                      placeholder="从浏览器复制cookie值"
                      show-word-limit>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :xs="24" :sm="12">
                <el-form-item label="phantomToken" prop="phantomToken">
                  <el-input
                      v-model="hotelApiSettings.phantomToken"
                      placeholder="从浏览器复制phantomToken值"
                      show-password>
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :xs="24" :sm="12">
                <el-form-item label="参数P" prop="p">
                  <el-input
                      v-model="hotelApiSettings.p"
                      placeholder="从浏览器复制p值">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 系统参数 -->
            <el-divider content-position="left">
              <el-icon><Monitor /></el-icon>
              系统参数
            </el-divider>

            <el-row :gutter="24">
              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="Agent" prop="agent">
                  <el-input
                      v-model="hotelApiSettings.agent"
                      placeholder="从浏览器复制agent值">
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="CID" prop="cid">
                  <el-input
                      v-model="hotelApiSettings.cid"
                      placeholder="从浏览器复制cid值">
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="AID" prop="aid">
                  <el-input
                      v-model="hotelApiSettings.aid"
                      placeholder="从浏览器复制aid值">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="SID" prop="sid">
                  <el-input
                      v-model="hotelApiSettings.sid"
                      placeholder="从浏览器复制sid值">
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="VID" prop="vid">
                  <el-input
                      v-model="hotelApiSettings.vid"
                      placeholder="从浏览器复制vid值">
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="GUID" prop="guid">
                  <el-input
                      v-model="hotelApiSettings.guid"
                      placeholder="从浏览器复制guid值">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item>
              <el-button
                  type="primary"
                  @click="saveHotelApiSettings"
                  :loading="savingHotelApi">
                <el-icon><Check /></el-icon>
                保存设置
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>

      <!-- 景点API设置 -->
      <el-tab-pane label="景点API设置" name="scene">
        <el-card class="setting-card">
          <template #header>
            <div class="card-header">
              <span><el-icon><House /></el-icon> 景点API设置</span>
              <el-button size="small" @click="refreshSceneApiConfig" :loading="loading">
                <el-icon><Refresh /></el-icon>
                刷新配置
              </el-button>
            </div>
          </template>

          <el-form
              :model="sceneApiSettings"
              ref="sceneApiForm"
              label-width="120px"
              class="settings-form">

            <!-- 基础设置 -->
            <el-divider content-position="left">
              <el-icon><Tools /></el-icon>
              基础设置
            </el-divider>

            <el-row :gutter="24">
              <el-col :xs="24" :sm="8">
                <el-form-item label="启用API">
                  <el-switch
                      v-model="sceneApiSettings.sceneEnabled"
                      active-text="启用"
                      inactive-text="禁用">
                  </el-switch>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 系统参数 -->
            <el-divider content-position="left">
              <el-icon><Monitor /></el-icon>
              系统参数
            </el-divider>

            <el-row :gutter="24">
              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="syscode" prop="syscode">
                  <el-input
                      v-model="sceneApiSettings.syscode"
                      placeholder="从浏览器复制syscode值">
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="CID" prop="cid">
                  <el-input
                      v-model="sceneApiSettings.cid"
                      placeholder="从浏览器复制cid值">
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="SID" prop="sid">
                  <el-input
                      v-model="sceneApiSettings.sid"
                      placeholder="从浏览器复制sid值">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item>
              <el-button
                  type="primary"
                  @click="saveSceneApiSettings"
                  :loading="savingSceneApi">
                <el-icon><Check /></el-icon>
                保存设置
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>

      <!-- 邮件通知设置 -->
      <el-tab-pane label="邮件通知" name="email">
        <el-card class="setting-card">
          <template #header>
            <div class="card-header">
              <span><el-icon><Message /></el-icon> 邮件通知设置</span>
              <el-button size="small" @click="refreshEmailConfig" :loading="loading">
                <el-icon><Refresh /></el-icon>
                刷新配置
              </el-button>
            </div>
          </template>

          <el-form
              :model="emailSettings"
              :rules="emailRules"
              ref="emailForm"
              label-width="120px"
              class="settings-form">

            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="启用邮件">
                  <el-switch
                      v-model="emailSettings.enabled"
                      active-text="启用"
                      inactive-text="禁用">
                  </el-switch>
                </el-form-item>
              </el-col>
            </el-row>

            <template v-if="emailSettings.enabled">
              <el-divider content-position="left">SMTP配置</el-divider>

              <el-row :gutter="24">
                <el-col :xs="24" :sm="16">
                  <el-form-item label="SMTP服务器" prop="smtpHost">
                    <el-input v-model="emailSettings.smtpHost" placeholder="例如: smtp.gmail.com"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :xs="24" :sm="8">
                  <el-form-item label="端口" prop="smtpPort">
                    <el-input-number
                        v-model="emailSettings.smtpPort"
                        :min="1"
                        :max="65535"
                        style="width: 100%">
                    </el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="24">
                <el-col :xs="24" :sm="12">
                  <el-form-item label="发件人邮箱" prop="fromEmail">
                    <el-input v-model="emailSettings.fromEmail" placeholder="发件人邮箱地址"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :xs="24" :sm="12">
                  <el-form-item label="用户名" prop="username">
                    <el-input v-model="emailSettings.username" placeholder="SMTP用户名"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="24">
                <el-col :xs="24" :sm="16">
                  <el-form-item label="密码" prop="password">
                    <el-input
                        v-model="emailSettings.password"
                        type="password"
                        show-password
                        placeholder="SMTP密码或授权码">
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :xs="24" :sm="8">
                  <el-form-item label="启用SSL">
                    <el-switch
                        v-model="emailSettings.ssl"
                        active-text="SSL"
                        inactive-text="普通">
                    </el-switch>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-divider content-position="left">测试配置</el-divider>

              <el-row :gutter="24">
                <el-col :xs="24" :sm="16">
                  <el-form-item label="测试邮箱">
                    <el-input
                        v-model="testEmail"
                        placeholder="输入测试邮箱地址">
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :xs="24" :sm="8">
                  <el-form-item label=" ">
                    <el-button
                        @click="testEmailSending"
                        :loading="testingEmail"
                        style="width: 100%">
                      <el-icon><Promotion /></el-icon>
                      发送测试
                    </el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </template>

            <el-form-item>
              <el-button
                  type="primary"
                  @click="saveEmailSettings"
                  :loading="savingEmail">
                <el-icon><Check /></el-icon>
                保存设置
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>

      <!-- 导出配置 -->
      <el-tab-pane label="导出配置" name="export">
        <el-card class="setting-card">
          <template #header>
            <div class="card-header">
              <span><el-icon><Download /></el-icon> 导出配置</span>
              <el-button size="small" @click="refreshExportConfig" :loading="loading">
                <el-icon><Refresh /></el-icon>
                刷新配置
              </el-button>
            </div>
          </template>

          <el-form
              :model="exportSettings"
              :rules="exportRules"
              ref="exportForm"
              label-width="120px"
              class="settings-form">

            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="启用导出">
                  <el-switch
                      v-model="exportSettings.enabled"
                      active-text="启用"
                      inactive-text="禁用">
                  </el-switch>
                </el-form-item>
              </el-col>
            </el-row>

            <template v-if="exportSettings.enabled">
              <el-row :gutter="24">
                <el-col :xs="24" :sm="12">
                  <el-form-item label="导出路径" prop="defaultPath">
                    <el-input v-model="exportSettings.defaultPath" placeholder="./exports"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :xs="24" :sm="12">
                  <el-form-item label="文件格式">
                    <el-select v-model="exportSettings.format" style="width: 100%">
                      <el-option label="Excel (.xlsx)" value="xlsx"></el-option>
                      <el-option label="CSV (.csv)" value="csv"></el-option>
                      <el-option label="JSON (.json)" value="json"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="24">
                <el-col :xs="24" :sm="12">
                  <el-form-item label="文件名格式">
                    <el-select v-model="exportSettings.nameFormat" style="width: 100%">
                      <el-option label="路线_日期_时间" value="route_date_time"></el-option>
                      <el-option label="日期_路线_时间" value="date_route_time"></el-option>
                      <el-option label="时间戳" value="timestamp"></el-option>
                      <el-option label="自定义" value="custom"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :xs="24" :sm="12" v-if="exportSettings.nameFormat === 'custom'">
                  <el-form-item label="自定义格式">
                    <el-input
                        v-model="exportSettings.customFormat"
                        placeholder="例如: flight_{date}_{time}">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-if="exportSettings.nameFormat === 'custom'">
                <el-col :span="24">
                  <div class="format-help">
                    <el-alert
                        title="格式变量说明"
                        type="info"
                        :closable="false"
                        show-icon>
                      <p>可用变量: {date} - 日期, {time} - 时间, {route} - 路线, {timestamp} - 时间戳</p>
                    </el-alert>
                  </div>
                </el-col>
              </el-row>
            </template>

            <el-form-item>
              <el-button
                  type="primary"
                  @click="saveExportSettings"
                  :loading="savingExport">
                <el-icon><Check /></el-icon>
                保存设置
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>

      <!-- 系统信息 -->
      <el-tab-pane label="系统信息" name="system">
        <el-row :gutter="20">
          <el-col :xs="24" :md="16">
            <el-card class="setting-card">
              <template #header>
                <div class="card-header">
                  <span><el-icon><Monitor /></el-icon> 系统状态</span>
                  <el-button size="small" @click="refreshSystemStatus" :loading="loading">
                    <el-icon><Refresh /></el-icon>
                    刷新状态
                  </el-button>
                </div>
              </template>

              <div class="system-info">
                <el-descriptions :column="2" border>
                  <el-descriptions-item label="系统版本">
                    <el-tag type="info">{{ systemInfo.version || '1.0.0' }}</el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="系统状态">
                    <el-tag :type="systemInfo.status === 'running' ? 'success' : 'danger'">
                      {{ systemInfo.status === 'running' ? '运行中' : '停止' }}
                    </el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="最后更新">
                    {{ systemInfo.lastUpdate || '未知' }}
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </el-card>
          </el-col>

          <el-col :xs="24" :md="8">
            <el-card class="setting-card">
              <template #header>
                <div class="card-header">
                  <span><el-icon><Tools /></el-icon> 系统操作</span>
                </div>
              </template>

              <div class="system-actions">
                <el-space direction="vertical" style="width: 100%">
                  <el-button
                      @click="resetConfig"
                      type="danger"
                      style="width: 100%"
                      :icon="RefreshLeft">
                    重置所有配置
                  </el-button>
                </el-space>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import systemApi from '@/api/system'
import {Check, Download, House, Message, Monitor, Refresh, Setting, Tools} from "@element-plus/icons-vue";

export default {
  name: 'SystemSettings',
  components: {Setting, Message, Download, Check, Monitor, Tools, Refresh, House},
  data() {
    return {
      activeTab: 'flight', // 默认激活的选项卡
      loading: false,
      savingApi: false,
      savingHotelApi: false,
      savingSceneApi: false,
      savingExport: false,
      savingEmail: false,
      testingApi: false,
      testingEmail: false,
      clearingCache: false,

      // 航班API设置
      apiSettings: {
        timeout: 30000,
        retryCount: 3,
        cookie: '',
        token: '',
        enabled: true
      },

      // 酒店API设置
      hotelApiSettings: {
        timeout: 30000,
        retryCount: 3,
        cookie: '',
        phantomToken: '',
        p: '',
        agent: '',
        cid: '',
        aid: '',
        sid: '',
        vid: '',
        guid: '',
        hotelEnabled: true
      },

      // 景点API设置
      sceneApiSettings: {
        cid: '',
        sid: '',
        syscode: '',
        sceneEnabled: true
      },

      // 导出设置
      exportSettings: {
        defaultPath: './exports',
        nameFormat: 'route_date_time',
        customFormat: '',
        format: 'xlsx',
        enabled: true
      },

      // 邮件设置
      emailSettings: {
        enabled: false,
        smtpHost: 'smtp.gmail.com',
        smtpPort: 587,
        username: '',
        password: '',
        fromEmail: '',
        ssl: true
      },

      // 系统信息
      systemInfo: {
        version: '',
        status: '',
        apiStatus: '',
        emailStatus: '',
        uptime: '',
        lastUpdate: '',
        activeTasks: 0,
        memoryUsage: 0,
        cpuUsage: 0
      },

      // 测试邮箱
      testEmail: '',

      // 表单验证规则
      apiRules: {
        timeout: [
          { required: true, message: '请输入超时时间', trigger: 'blur' },
          { type: 'number', min: 5000, max: 60000, message: '超时时间应在5-60秒之间', trigger: 'blur' }
        ],
        retryCount: [
          { required: true, message: '请输入重试次数', trigger: 'blur' },
          { type: 'number', min: 0, max: 5, message: '重试次数应在0-5之间', trigger: 'blur' }
        ]
      },

      // 表单验证规则
      apiHotelRules: {
        timeout: [
          { required: true, message: '请输入超时时间', trigger: 'blur' },
          { type: 'number', min: 5000, max: 60000, message: '超时时间应在5-60秒之间', trigger: 'blur' }
        ],
        retryCount: [
          { required: true, message: '请输入重试次数', trigger: 'blur' },
          { type: 'number', min: 0, max: 5, message: '重试次数应在0-5之间', trigger: 'blur' }
        ]
      },

      exportRules: {
        defaultPath: [
          { required: true, message: '请输入默认路径', trigger: 'blur' }
        ]
      },

      emailRules: {
        smtpHost: [
          { required: true, message: '请输入SMTP服务器', trigger: 'blur' }
        ],
        smtpPort: [
          { required: true, message: '请输入端口号', trigger: 'blur' },
          { type: 'number', min: 1, max: 65535, message: '端口号应在1-65535之间', trigger: 'blur' }
        ],
        fromEmail: [
          { required: true, message: '请输入发件人邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ]
      }
    }
  },

  mounted() {
    this.loadAllSettings()
  },

  methods: {
    // === 加载所有设置 ===
    async loadAllSettings() {
      this.loading = true
      try {
        await Promise.all([
          this.loadApiConfig(),
          this.loadHotelApiConfig(),
          this.loadSceneApiConfig(),
          this.loadExportConfig(),
          this.loadEmailConfig(),
          this.loadSystemStatus()
        ])
      } catch (error) {
        console.error('加载设置失败:', error)
        ElMessage.error('加载设置失败')
      } finally {
        this.loading = false
      }
    },

    // === 航班API配置相关 ===
    async loadApiConfig() {
      try {
        const response = await systemApi.getApiConfig()
        if (response.code === 200) {
          this.apiSettings = { ...this.apiSettings, ...response.data }
        }
      } catch (error) {
        console.error('加载API配置失败:', error)
      }
    },

    async refreshApiConfig() {
      await this.loadApiConfig()
      ElMessage.success('API配置已刷新')
    },

    async saveApiSettings() {
      if (!await this.validateForm('apiForm')) return

      this.savingApi = true
      try {
        const response = await systemApi.saveApiConfig(this.apiSettings)
        if (response.code === 200) {
          ElMessage.success('API设置保存成功')
        }
      } catch (error) {
        console.error('保存API配置失败:', error)
        ElMessage.error('保存API配置失败')
      } finally {
        this.savingApi = false
      }
    },

    // === 酒店API配置相关 ===
    async loadHotelApiConfig() {
      try {
        const response = await systemApi.getHotelApiConfig()
        if (response.code === 200) {
          this.hotelApiSettings = { ...this.hotelApiSettings, ...response.data }
        }
      } catch (error) {
        console.error('加载酒店API配置失败:', error)
      }
    },

    async refreshHotelApiConfig() {
      await this.loadHotelApiConfig()
      ElMessage.success('API配置已刷新')
    },

    async saveHotelApiSettings() {
      if (!await this.validateHotelForm('hotelApiForm')) return

      this.savingHotelApi = true
      try {
        const response = await systemApi.saveHotelApiConfig(this.hotelApiSettings)
        if (response.code === 200) {
          ElMessage.success('API设置保存成功')
        }
      } catch (error) {
        console.error('保存API配置失败:', error)
        ElMessage.error('保存API配置失败')
      } finally {
        this.savingHotelApi = false
      }
    },

    // === 景点API配置相关 ===
    async loadSceneApiConfig() {
      try {
        const response = await systemApi.getSceneApiConfig()
        if (response.code === 200) {
          this.sceneApiSettings = { ...this.sceneApiSettings, ...response.data }
        }
      } catch (error) {
        console.error('加载景点API配置失败:', error)
      }
    },

    async refreshSceneApiConfig() {
      await this.loadSceneApiConfig()
      ElMessage.success('API配置已刷新')
    },

    async saveSceneApiSettings() {
      if (!await this.validateSceneForm('sceneApiForm')) return

      this.savingSceneApi = true
      try {
        const response = await systemApi.saveSceneApiConfig(this.sceneApiSettings)
        if (response.code === 200) {
          ElMessage.success('API设置保存成功')
        }
      } catch (error) {
        console.error('保存API配置失败:', error)
        ElMessage.error('保存API配置失败')
      } finally {
        this.savingSceneApi = false
      }
    },

    // === 导出配置相关 ===
    async loadExportConfig() {
      try {
        const response = await systemApi.getExportConfig()
        if (response.code === 200) {
          this.exportSettings = { ...this.exportSettings, ...response.data }
        }
      } catch (error) {
        console.error('加载导出配置失败:', error)
      }
    },

    async refreshExportConfig() {
      await this.loadExportConfig()
      ElMessage.success('导出配置已刷新')
    },

    async saveExportSettings() {
      if (!await this.validateForm('exportForm')) return

      this.savingExport = true
      try {
        const response = await systemApi.saveExportConfig(this.exportSettings)
        if (response.code === 200) {
          ElMessage.success('导出设置保存成功')
        }
      } catch (error) {
        console.error('保存导出配置失败:', error)
        ElMessage.error('保存导出配置失败')
      } finally {
        this.savingExport = false
      }
    },

    // === 邮件配置相关 ===
    async loadEmailConfig() {
      try {
        const response = await systemApi.getEmailConfig()
        if (response.code === 200) {
          this.emailSettings = { ...this.emailSettings, ...response.data }
        }
      } catch (error) {
        console.error('加载邮件配置失败:', error)
      }
    },

    async refreshEmailConfig() {
      await this.loadEmailConfig()
      ElMessage.success('邮件配置已刷新')
    },

    async saveEmailSettings() {
      if (this.emailSettings.enabled && !await this.validateForm('emailForm')) return

      this.savingEmail = true
      try {
        const response = await systemApi.saveEmailConfig(this.emailSettings)
        if (response.code === 200) {
          ElMessage.success('邮件设置保存成功')
        }
      } catch (error) {
        console.error('保存邮件配置失败:', error)
        ElMessage.error('保存邮件配置失败')
      } finally {
        this.savingEmail = false
      }
    },

    async testEmailSending() {
      if (!this.testEmail) {
        ElMessage.warning('请输入测试邮箱地址')
        return
      }

      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.testEmail)) {
        ElMessage.error('请输入正确的邮箱格式')
        return
      }

      this.testingEmail = true
      try {
        const response = await systemApi.testEmailSending(this.testEmail)
        if (response.code === 200 && response.data) {
          ElMessage.success('测试邮件发送成功')
        } else {
          ElMessage.error('测试邮件发送失败')
        }
        await this.loadEmailConfig()
      } catch (error) {
        console.error('测试邮件发送失败:', error)
        ElMessage.error('测试邮件发送失败')
      } finally {
        this.testingEmail = false
      }
    },

    // === 系统状态相关 ===
    async loadSystemStatus() {
      try {
        const response = await systemApi.getSystemStatus()
        if (response.code === 200) {
          this.systemInfo = { ...this.systemInfo, ...response.data }
        }
      } catch (error) {
        console.error('加载系统状态失败:', error)
      }
    },

    async refreshSystemStatus() {
      await this.loadSystemStatus()
      ElMessage.success('系统状态已刷新')
    },

    async resetConfig() {
      try {
        await this.$confirm('确定要重置所有配置为默认值吗？此操作不可恢复！', '危险操作', {
          confirmButtonText: '确定重置',
          cancelButtonText: '取消',
          type: 'warning',
          confirmButtonClass: 'el-button--danger'
        })

        const response = await systemApi.resetAllConfigs()
        if (response.code === 200) {
          await this.loadAllSettings() // 重新加载所有设置
          ElMessage.success('配置已重置为默认值')
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('重置配置失败:', error)
          ElMessage.error('重置配置失败')
        }
      }
    },

    // === 工具方法 ===
    async validateForm(formRef) {
      try {
        await this.$refs[formRef].validate()
        return true
      } catch (error) {
        return false
      }
    },
    async validateHotelForm(formRef) {
      try {
        await this.$refs[formRef].validate()
        return true
      } catch (error) {
        return false
      }
    },
    async validateSceneForm(formRef) {
      try {
        await this.$refs[formRef].validate()
        return true
      } catch (error) {
        return false
      }
    },
  }
}
</script>

<style scoped>
.system-settings {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 24px;
  padding: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
  text-align: center;
}

.page-title {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.page-description {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}

.settings-tabs {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.setting-card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: none;
  margin-bottom: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
  color: #303133;
}

.card-header span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-form {
  padding: 8px 0;
}

.unit {
  margin-left: 8px;
  color: #909399;
  font-size: 14px;
}

.format-help {
  margin-top: 12px;
}

.system-info {
  padding: 0;
}

.system-actions {
  text-align: center;
  padding: 16px 0;
}

/* 表单项样式优化 */
:deep(.el-form-item) {
  margin-bottom: 20px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #303133;
}

:deep(.el-input),
:deep(.el-select),
:deep(.el-input-number) {
  border-radius: 6px;
}

:deep(.el-textarea .el-input__inner) {
  border-radius: 6px;
}

/* 分割线样式 */
:deep(.el-divider--horizontal) {
  margin: 24px 0 20px 0;
}

:deep(.el-divider__text) {
  color: #606266;
  font-weight: 500;
}

/* 选项卡样式优化 */
:deep(.el-tabs__header) {
  margin: 0;
}

:deep(.el-tabs__nav-wrap) {
  background: #f8f9fa;
}

:deep(.el-tabs__item) {
  font-weight: 500;
  color: #606266;
  transition: all 0.3s ease;
}

:deep(.el-tabs__item.is-active) {
  color: #409eff;
  font-weight: 600;
}

:deep(.el-tabs__content) {
  padding: 24px;
}

/* 开关样式 */
:deep(.el-switch__label) {
  color: #303133;
  font-weight: 500;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .system-settings {
    padding: 16px;
  }

  .page-header {
    padding: 20px 16px;
  }

  .page-title {
    font-size: 24px;
  }

  :deep(.el-tabs__content) {
    padding: 16px;
  }

  :deep(.el-form-item__label) {
    text-align: left !important;
  }
}

/* 加载状态样式 */
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
}
</style>